<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" @click="addMenu">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="name"
          label="名称"
          sortable width="180">
      </el-table-column>
      <el-table-column
          prop="perms"
          label="权限编码"
          sortable width="180">
      </el-table-column>
       <el-table-column
          prop="icon"
          label="图标">
      </el-table-column>
       <el-table-column
          prop="type"
          label="类型">
      </el-table-column>
       <el-table-column
          prop="path"
          label="菜单URL"
          sortable width="180">
      </el-table-column>
       <el-table-column
          prop="component"
          label="菜单组件"
          sortable width="180">
      </el-table-column>
       <el-table-column
          prop="orderNum"
          label="排序号"
          sortable width="180">
      </el-table-column>
       <el-table-column
          prop="state"
          label="状态"
          sortable width="180">
      </el-table-column>
        <el-table-column
          prop="operation"
          label="操作">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'Menu',
  data () {
    return {
      // tableData: [{
      //   id: 1,
      //   date: '2016-05-02',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄'
      // }, {
      //   id: 2,
      //   date: '2016-05-04',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1517 弄'
      // }, {
      //   id: 3,
      //   date: '2016-05-01',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1519 弄',
      //   children: [{
      //     id: 31,
      //     date: '2016-05-01',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1519 弄'
      //   }, {
      //     id: 32,
      //     date: '2016-05-01',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1519 弄'
      //   }]
      // }, {
      //   id: 4,
      //   date: '2016-05-03',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1516 弄'
      // }]
    }
  },
  methods: {
    addMenu () {

    }
  }
}

</script>
<style scoped>

</style>
